<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <input v-model="queryTime" placeholder="输入查询时间（格式：HH:mm）">
    <button @click="query">查询</button>
    <table>
        <thead>
            <tr>
                <th></th>
                <th v-for="time in tableHeader">{{ time }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(row, index) in tableData" :key="index">
                <th>序列 {{ index + 1 }}</th>
                <td v-for="value in row">{{ value }}</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    // 假设数据从API获取
                    tableHeader: [
                        "00:01", "00:02", "00:03", "00:04", "00:05", "00:06",
                        "00:07", "00:08", "00:09", "00:10", "00:11", "00:12",
                        "00:13", "00:14", "00:15", "00:16", "00:17", "00:18",
                        "00:19", "00:20", "00:21", "00:22", "00:23", "00:24",
                        "00:25", "00:26", "00:27", "00:28", "00:29", "00:30",
                        "00:31", "00:32", "00:33", "00:34", "00:35", "00:36",
                        "00:37", "00:38", "00:39", "00:40", "00:41", "00:42",
                        "00:43", "00:44", "00:45", "00:46", "00:47", "00:48",
                        "00:49", "00:50", "00:51", "00:52", "00:53", "00:54",
                        "00:55", "00:56", "00:57", "00:58", "00:59", "01:00",
                        // ... 其他时间点
                    ],
                    tableData: [
                        [10, 15, 8, 9, 12, 13, 18, 21, 15, 13, 12, 11, 9, 20, 19, 18, 20, 15, 13, 10, 11, 16, 17, 15, 11, 14, 17, 16, 18, 20, 22, 21, 23, 20, 25, 24, 23, 22, 21, 20, 18, 16, 14, 15, 17, 19, 20, 15, 14, 13, 12, 11, 10, 13, 14, 12, 10, 9, 12, 13, 14, 15, 16, 17],
                        [11, 13, 9, 10, 13, 16, 18, 19, 14, 11, 10, 9, 8, 18, 17, 16, 19, 11, 13, 12, 13, 17, 16, 13, 12, 15, 14, 15, 16, 14]
                    ]
                }
            }
        })
    </script>
</body>

</html>